$(document).ready(function () {
    SetupCarousels();
});

function SetupCarousels() {
    $('.slider').not('.singleCarouselItem').each(function () {
        var $this = $(this);
        $this.on('init', function () {
            if (Waypoint) {
                Waypoint.refreshAll();
            }
            SetupLazyLoad();
            $this.find('.slick-list').removeAttr('aria-live');
        });
       
        var arrowsWithDots = $this.closest('.herocarouselblock').find('#hdnArrowsWithDots').val() === 'true';
        var sliderSettings = {
            slidesToShow: 1,
            slidesToScroll: 1,
            prevArrow: '<button aria-label="Move Previous Image" type="button" data-role="none" class="prev fa fa-caret-left" tabindex="0" role="button">' + $this.attr('data-arrow') + '</button>',
            nextArrow: '<button aria-label="Move Next Image" type="button" data-role="none" class="next fa fa-caret-right" tabindex="0" role="button">' + $this.attr('data-arrow') + '</button>',
            dots: true,
        };

        var autoplay = $this.attr('data-autoplay') === 'True';        
        var autoplaySettings = {
            autoplay: true,
            autoplaySpeed: $this.attr('data-speed'),
            infinite: true,
            pauseOnFocus: true,
            pauseOnHover: true,
            pauseOnDotsHover: true
        };

        sliderSettings = autoplay ? Object.assign({}, sliderSettings, autoplaySettings) : sliderSettings;

        var isInfinite = sliderSettings.infinite === true;
        function updateSlickArrows(slick, currentSlide) {
            var $prev = $this.find('.prev');
            var $next = $this.find('.next');

            if (isInfinite) {
                var atStart = currentSlide === 0;
                $prev.toggleClass('slick-disabled', atStart)
                    .prop('disabled', atStart)
                    .attr('aria-disabled', atStart);

                $next.removeClass('slick-disabled')
                    .prop('disabled', false)
                    .attr('aria-disabled', false);
            } else {
                var total = slick.slideCount;
                var toShow = slick.options.slidesToShow || 1;
                var atFirst = currentSlide === 0;
                var atLast = currentSlide >= total - toShow;

                $prev.toggleClass('slick-disabled', atFirst)
                    .prop('disabled', atFirst)
                    .attr('aria-disabled', atFirst);

                $next.toggleClass('slick-disabled', atLast)
                    .prop('disabled', atLast)
                    .attr('aria-disabled', atLast);
            }
        }
       
        $this.on('init', function (event, slick) {
            updateSlickArrows(slick, 0);

            if (arrowsWithDots) {
                var $dots = $this.find('.slick-dots');
                var $arrows = $this.find('.prev, .next');
                if ($dots.length && $arrows.length) {
                    $dots.append($arrows);
                }
            }
        });

        $this.slick(sliderSettings);

        $this.on('afterChange', function (event, slick, currentSlide) {
            updateSlickArrows(slick, currentSlide);
        });

        //Avoid announcing all content as clickable list on browse mode
        var sliderSlick = $this.find(".slick-track");

        // Only wire up the pause/resume arrow logic if autoplay is true
        if (autoplay) {
            $this.on('click', '.prev, .next', function () {
                $this.slick('slickPause');
                setTimeout(function () {
                    $this.slick('slickPlay');
                }, $this.attr('data-speed'));
            });

            if (sliderSlick.length) {
                sliderSlick.append("<div aria-live='polite' class='carousel-sr sr-only'></div>");

                var userInteracted = false;
                $this.on('click', '.prev, .next, .slick-dots button', function () {
                    userInteracted = true;
                });

                $this.on('afterChange', function (event, slick, currentSlideIndex) {
                    if (!userInteracted) return;
                    userInteracted = false;

                    var currentSlide = $(slick.$slides[currentSlideIndex]);
                    setTimeout(function () {
                        var $link = currentSlide.find("a");
                        if ($link.length) {
                            $link.focus({ preventScroll: true });
                        }
                    }, 100);
                });
            }
        }
        else {
            if (sliderSlick.length) {
                sliderSlick.append("<div aria-live='polite' class='carousel-sr sr-only'></div>");
                $this.on('afterChange', function (event, slick, currentSlideIndex) {
                    var currentSlide = $(slick.$slides[currentSlideIndex]);
                    setTimeout(function () {
                        var $link = currentSlide.find("a");
                        if ($link.length) {
                            $link.focus();
                        }
                    }, 100);
                });
            }
        }
    });
}